<template>
  <div class="emergency-map-detail">
    <h2 class="title">广东教育局 <i class="el-icon-arrow-right b"></i> 深圳市</h2>
    <div class="card c-f oh" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div v-for="item in keys" class="fr ac item f-14" :key="item.label">
        <div class="label">{{item.label}}</div>
        <div>{{form[item.key] | emnu(item.key)}}</div>
      </div>
      <div class="fr item f-14">
        <div class="label">说明：</div>
        <div class="pre">{{form.details}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'emergency-map-detail',
    props: [ 'id' ],
    data () {
      return {
        loading: false,
        form: {},
        keys: [
          { label: '单位名称：', key: 'hospitalname' },
          { label: '区县：', key: 'provincecityname' },
          { label: '单位地址：', key: 'address' },
          { label: '等级：', key: 'grade' },
          { label: '类型：', key: 'hospitaltype' },
          { label: '是否有发热门诊：', key: 'feverclinic' },
          { label: '病床：', key: 'hospitalbed' },
          { label: '单位电话：', key: 'workphone' },
          { label: '负责人：', key: 'contacts' },
          { label: '负责人联系方式：', key: 'contactphone' }
        ]
      }
    },
    methods: {
      getDetail () {
        this.loading = true
        this.$http('/hospital/form', { hospid: ~~this.id }).then(
          res => {
            const { data = {} } = res
            this.form = data
            this.loading = false
          }
        )
      }
    },
    created () {
      this.getDetail()
    }
  }
</script>

<style lang="less">
.emergency-map-detail {
  .item {padding: 16px 0;}
  .label {width: 150px;min-width: 150px;color: rgba(255, 255, 255, .8);}
}
</style>
